// 课程panel元素，有两套模板

// base
require("../../both/base.js");

// css
require("./UserCoursePanel.scss");

// code
class UserCoursePanel extends React.Component{
    render() {
        var props = this.props;
        var badge = ["沙龙","方向","技术"];
        var imageSrc = props.imageSrc;
        var starNum = props.starNum;
        var studentNumber = props.studentNumber;
        var title = props.title;
        var courseId = props.courseId
        var href = `/user_video/${courseId}`

        var badges = badge.map((ele,idx) =>
            <a href="#" key={idx.toString()}><span className="user_course_badge_item">{ele}</span></a>
        );

        return (
            <div className="user_course_panel">
                <a href={href}>
                    <img className="cover lazy" src={imageSrc}  alt=""/>
                </a>
                <div className="user_course_panel_info">
                    <div className="user_course_panel_content">
                        <a href={href}>
                            <div className="panel_title">
                                {title}
                            </div>
                        </a>
                    </div>
                    <div className="user_course_badge">
                        {badges}
                    </div>
                    <div className="user_course_panel_footer">
                        <a href={href}><span className="footer_price">点赞人数：{starNum}</span></a>
                        <a href={href}><span className="footer_number">{studentNumber}人在学习</span></a>
                    </div>
                </div>
            </div>
        )
    }
}

export default UserCoursePanel;